Препроцессор Sass. Введение 2018
CSS препроцессор это профессиональный инструмент который должен освоить каждый web-разработчик.
Написание кода при его использовании становится более простым и понятным, однако, это является далеко не основным преимуществом, которое нам предоставляется. Первое и, наверное, самое главное преимущество препроцессоров в том, что ваша разработка ускоряется в несколько раз, при этом множество однотипных операций можно выполнить всего лишь одной строкой кода. Помимо этого появляется возможность использования переменных, вложенных селекторов, создания функций, условий, циклов, миксинов и множество других операций.
Однажды, попробовав использовать CSS препроцессор, вы поймете, как давно вам этого не хватало. Вы больше не сможете работать без него, а поможет вам в изучении препроцессора SASS данный видеокурс от команды WebForMySelf.


Урок 1. Препроцессор Sass. Установка и настройка окружения:
От автора: в данном видеоуроке мы начнем подготовительную работу для дальнейшего изучения CSS препроцессора SASS, немного поговорим об автоматизации и настроим для работы таcк раннер Gulp.
По результатам урока вы познакомитесь командной строкой, пакетным менеджером npm, научитесь устанавливать различные модули для проекта и создавать необходимые таски для выполнения определенных задач.


Урок 2. Препроцессор Sass. Компиляция при помощи приложения:
От автора: Компилировать код можно несколькими способами. В данном уроке мы рассмотрим еще одну возможность компиляции кода препроцессора SASS посредством использования приложения Koala.
По результатам урока мы произведем установку и базовую настройку бесплатного прило-жения для компиляции Koala, а также научимся им пользоваться.


Урок 3. Препроцессор Sass. Переменные и вложенность:
От автора: иногда в проекте со временем возникает необходимость заменить, например, шрифт на другой. И если это не большой проект, то можно в нескольких местах поменять название шрифта и все. Но если проект большой, с множеством подключаемых css файлов, то эта задача вызывает некоторые сложности. В этом уроке мы начинаем изучение препроцессора SASS и рассмотрим использование переменных и вложенность селекторов.
По результатам видео вы узнаете как создаются переменные в SASS, сможете отличить глобальные переменные от локальных, а также поймете как использовать вложенный синтаксис препроцессора.


Урок 4. Препроцессор Sass. Импорты и фрагментация:
От автора: в текущем уроке мы познакомимся с директивой @import, поговорим о некоторых отличиях данной директивы от CSS правила import, а также обсудим, каким образом препроцессор SASS предоставляет нам возможность создавать scss или sass файлы, которые не компилируются в CSS код.
По результатам видеоурока вы увидите, как работает и каким образом мы можем подключать файлы при помощи директивы @import в препроцессоре SASS. Узнаете, что такое фрагменты и в чем их отличие от обычных scss файлов.


Урок 5. Препроцессор Sass. Наследование и селектор расширения:
От автора: продолжая изучение препроцессора SASS, мы познакомимся с одним из способов, как избавиться от дублирования кода при помощи использования директивы @extend и рассмотрим селектор расширения, который применяется при использовании данной директивы.
По результатам урока вы узнаете, каким образом происходит компиляция при использовании директивы расширения, сможете использовать множественные расширения, а также изучите новый шаблонный селектор в препроцессоре SASS, который не компилируется в css код.


Урок 6. Препроцессор Sass. Миксины. Часть 1:
От автора: в этом уроке мы познакомимся с миксинами или, как их еще называют, примесями. Данная возможность является довольно часто используемой, так как она помогает избавиться от множественного дублирования кода, при этом вы сможете значительно увеличить свою производительность.
По результатам урока вы узнаете, что такое миксины, познакомитесь с синтаксисом их создания и объявления. Помимо этого мы попробуем использовать вложенные миксины, а также поговорим о директиве @content, которая позволяет размещать стили внутри подключаемого миксина.


Урок 7. Препроцессор Sass. Миксины. Часть 2:
От автора: в данном уроке мы продолжаем изучение миксинов, где обсудим все возможности переда-чи параметров, которые в дальнейшем можно использовать внутри самого миксина.
По результатам видеоурока вы научитесь передавать необходимые параметры в миксин, узнаете, как указывать значения по умолчанию для заданных параметров, а также позна-комитесь с понятием именованных аргументов.


Урок 8. Препроцессор Sass. Операторы и директива условия @if:
От автора: в данном уроке мы познакомимся с некоторыми встроенными операторами в препроцессор SASS, а именно: сложением, вычитанием, умножением и делением. Помимо операторов будет рассмотрена директива условия @if, которая позволяет устанавливать определенные стили в зависимости от различных условий.
Из урока вы узнаете основные особенности и недостатки при работе с встроенными операторами, после чего разберетесь с возможным применением условной директивы @if, которую мы используем на небольшом практическом примере при создании миксина кнопки.


Урок 9. Препроцессор Sass. Функции:
От автора: в текущем уроке мы поговорим о возможности создания собственных функций в препроцессоре SASS, а также рассмотрим несколько встроенных функций, которые постоянно применяются на практике.
По результатам урока вы научитесь создавать собственные функции, которые при необходимости можно использовать во всех будущих проектах. Мы рассмотрим практический пример создания функции, которая будет производить перевод значений межсимвольного интервала из photoshop в единицы измерения CSS. После чего перейдем к изучению встроенных функций darken и lighten.


Урок 10. Препроцессор Sass. Директивы @for, @each и @while:
От автора: в заключительном уроке будут рассмотрены директивы @for, @each и @while, при помощи которых мы можем выводить некоторый набор стилей определенное количество раз.
Из урока вы узнаете синтаксис изучаемых директив, чем они отличаются друг от друга, познакомитесь с понятием интерполяции и закрепите использование каждого цикла на примере.